<template>
    <div class="r-container" style="height: 100%">
        <!-- 功能描述 -->
        <div class="hand">
            <div class="hand-title">
                <h2>
                    <icon name="user"></icon>
                    个人注册用户
                </h2>
            </div>
            <div class="breadcrumb">
                <i class="moe-icon moe-icon-map-marker"></i>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path: '/'}">我的控制台</el-breadcrumb-item>
                    <el-breadcrumb-item>个人管理</el-breadcrumb-item>
                    <el-breadcrumb-item>注册用户</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 内容容器 -->
        <div class="container">
            <div class="block block-rounded">
                <div class="block-content">
                    <!-- 选项 -->
                    <div class="block-option">
                        <el-row>
                            <el-col :span="8">
                                <el-input v-model="search.keyword"
                                          size="medium"
                                          class="input-with-select"
                                          placeholder="姓名/用户名/手机号码"
                                          clearable
                                          @keyup.enter.native="handleSearch">
                                    <el-select v-model="search.type"
                                               slot="prepend"
                                               placeholder="不限"
                                               style="width: 90px;">
                                        <el-option label="不限" value=""></el-option>
                                        <el-option label="用户名" value="username"></el-option>
                                        <el-option label="手机号" value="mobile"></el-option>
                                        <el-option label="邮箱" value="email"></el-option>
                                    </el-select>
                                    <el-button slot="append"
                                               icon="el-icon-search"
                                               :loading="search.loading"
                                               @click="handleSearch">搜索
                                    </el-button>
                                </el-input>
                            </el-col>
                            <el-col :span="16" class="text-right">
                                <el-button-group>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-refresh"
                                               :loading="operate.loading"
                                               @click="handleReload">重新载入
                                    </el-button>
                                    <el-button type="primary"
                                               icon="el-icon-plus"
                                               size="medium"
                                               @click="openDialogBox">创建
                                    </el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>
                        <div class="r-flex mt-20 font-s14">
                            <div class="r-flex__item">
<!--                                <el-select v-model="pickerDate.typeValue"-->
<!--                                           placeholder="类型"-->
<!--                                           size="medium"-->
<!--                                           class="mr-10"-->
<!--                                           style="width: 80px;">-->
<!--                                    <el-option v-for="item in pickerDate.typeOptions"-->
<!--                                               :key="item.value"-->
<!--                                               :label="item.label"-->
<!--                                               :value="item.value"></el-option>-->
<!--                                </el-select>-->
                                <!-- 类型 -->
                                <el-select v-model="params.date_type"
                                           placeholder="类型"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;">
                                    <el-option v-for="item in pickerDate.typeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                                <!-- 日期类型 -->
                                <el-select v-model="params.date_type_value"
                                           size="medium"
                                           placeholder="日期"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;"
                                           :disabled="isEmpty(params.date_type)">
                                    <el-option v-for="item in pickerDate.dateTypeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                                <!-- 日期 -->
                                <el-date-picker range-separator="-"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                size="medium"
                                                class="mr-10"
                                                style="width: 300px;"
                                                clearable
                                                v-model="params.date_value"
                                                :type="params.date_type_value || 'daterange'"
                                                :picker-options="pickerDate.dateOptions"
                                                :disabled="isEmpty(params.date_type) || isEmpty(params.date_type_value)">
                                </el-date-picker>
                                <el-button type="default"
                                           size="medium"
                                           icon="el-icon-search"
                                           @click="handleQuery">查询
                                </el-button>
                            </div>
                            <div class="text-right">
                                <strong class="font-s16 text-bold">结果：{{ total || 0 }}</strong>
                            </div>
                        </div>
                    </div>
                    <!-- 列表 -->
                    <el-table ref="dataList"
                              row-key="id"
                              size="medium"
                              highlight-current-row
                              :stripe="true"
                              :data="personalUsers"
                              :empty-text="table.emptyText"
                              v-loading="table.loading"
                              :element-loading-text="table.loadText"
                              :element-loading-background="table.backgroundColor"
                              @sort-change="handleQuerySort">
                        <el-table-column label="ID" fixed="left" prop="uid" width="70" :sortable="'custom'">
                            <template slot-scope="item">
                                <strong class="text-black">{{ item.row.uid }}</strong>
                            </template>
                        </el-table-column>
                        <el-table-column label="姓名" prop="name" width="80">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.name}">{{ item.row.name || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="用户名" prop="username" width="120" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <span class="text-hide" :class="{'text-info-light': !item.row.username}">
                                    {{item.row.username || '无' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机号码" prop="mobile" width="120">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.mobile}">{{ item.row.mobile || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="头像" width="60" align="center">
                            <template slot-scope="item">
                                <el-image class="image-avatar image-avatar--32"
                                          fit="cover"
                                          :src="item.row.avatar ? item.row.avatar_url : ''"
                                          :preview-src-list="[item.row.avatar_url]">
                                    <div slot="error">
                                        <icon name="pic"></icon>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="邮箱" prop="email" width="180">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.email}">{{ item.row.email || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="简历" prop="email" width="50" align="center">
                            <template slot-scope="item">
                                <el-tag size="mini"
                                        effect="dark"
                                        :type="item.row.resume_count ? 'success' : 'info'">
                                    {{ `${item.row.resume_count}份` }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="注册时间" prop="created_at" width="160"></el-table-column>
                        <el-table-column label="最后登录时间" prop="last_login_time" width="160"></el-table-column>
                        <el-table-column label="绑定">
                            <template slot-scope="item">
                                <div class="binding">
                                    <!-- 已绑定手机号码 -->
                                    <el-tooltip v-show="item.row.bind.mobile"
                                                content="已绑定手机号码"
                                                placement="top">
                                        <icon name="mobile"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 已绑定电子邮箱 -->
                                    <el-tooltip v-show="item.row.bind.email"
                                                content="已绑定电子邮箱"
                                                placement="top">
                                        <icon name="email"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 已绑定 QQ -->
                                    <el-tooltip v-show="item.row.bind.qq"
                                                content="已绑定 QQ"
                                                placement="top">
                                        <icon name="qq"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 已绑定 Wechat -->
                                    <el-tooltip v-show="item.row.bind.wechat"
                                                content="已绑定微信"
                                                placement="top">
                                        <icon name="wechat"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 使用小程序 -->
                                    <el-tooltip v-show="item.row.bind.wechat_mini_program"
                                                content="已使用小程序"
                                                placement="top">
                                        <icon name="mini-program"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 使用 APP -->
                                    <el-tooltip v-show="item.row.bind.app"
                                                content="已使用 APP"
                                                placement="top">
                                        <icon name="app"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="锁定" width="70" align="center" fixed="right">
                            <template slot-scope="item">
                                <el-tag size="small"
                                        :type="item.row.is_lock === 0 ? 'success' : 'danger'">
                                    {{ item.row.is_lock_label }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="125" fixed="right">
                            <template slot="header">
                                操作
                                <el-popover placement="left" trigger="hover">
                                    <div>
                                        <div><el-tag size="mini"><icon name="edit"></icon></el-tag> 编辑注册用户</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="lock1"></icon></el-tag> 锁定用户</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="unlock"></icon></el-tag> 解锁用户</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="resume"></icon></el-tag> 查看默认简历</div>
                                    </div>
                                    <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                                </el-popover>
                            </template>
                            <template slot-scope="item">
                                <div class="r-flex">
                                    <div class="r-flex__item">
                                        <el-button-group class="r-button-group">
                                            <el-button size="medium"
                                                       @click="dialogPersonalUserShow(item.row.uid, item.$index)">
                                                <icon name="edit"></icon>
                                            </el-button>
                                            <el-button size="medium" @click="handleLock(item)">
                                                <icon :name="item.row.is_lock === 0 ? 'lock1' : 'unlock'"
                                                      :class="{'text-danger': item.row.is_lock === 1}"></icon>
                                            </el-button>
                                        </el-button-group>
                                    </div>
                                    <div>
                                        <el-button size="medium"
                                                   style="padding: 7px 8px;"
                                                   :disabled="isEmpty(item.row.resume)"
                                                   @click="dialogResumeShow(item.row.resume.id)">
                                            <icon name="resume"></icon>
                                        </el-button>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 页码 -->
                    <div class="block-pagination text-center">
                        <el-pagination :total="total"
                                       :page-sizes="pagination.pageSizes"
                                       :page-size.sync="pagination.perPage"
                                       :current-page.sync="pagination.currentPage"
                                       @size-change="handlePageQuery"
                                       @current-change="handlePageQuery"
                                       background
                                       layout="sizes, prev, pager, next, jumper"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import AuthBoxMixin from '@/mixins/cms/auth'
import baseMixin from '@/mixins/base'
import DialogBoxMixin from '@/mixins/dialog'
import FunctionMixin from '@/mixins/function'
import PickerDateMixin from '@/mixins/picker-date'
import PersonalMixin from '@/mixins/personal'

import { dateFormat, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/personalUser')

import Create from '@/views/cms/personal/personal-user/Create.vue'
import PersonalUserShow from '@/views/cms/personal/personal-user/Show.vue'
import ResumeShow from '@/views/cms/personal/resume/Show.vue'

@Component({
  components: {
    Create,
    PersonalUserShow,
    ResumeShow
  }
})

export default class Index extends mixins(AuthBoxMixin, baseMixin, DialogBoxMixin, FunctionMixin, PickerDateMixin, PersonalMixin) {
  // Vuex
  @module.State personalUsers!: Array<any>
  @module.State total!: number
  @module.Action index!: (payload: any) => Promise<any>
  @module.Action query!: (payload: any) => Promise<any>
  @module.Action show!: (payload: any) => Promise<any>
  @module.Action lock!: (payLoad: any) => Promise<any>
  // @module.Action destroy!: (payload: any) => Promise<any>

  // 操作组
  private operate: any = {
    loading: false,
    groupLoading: false
  }

  private querySort: any = { prop: 'uid', order: 'descending' }

  /*----- 钩子 -----*/
  public created() {
    if (!this.personalUsers.length) {
      this.getIndex()
    }
  }

  /**
   * 获取首页
   *
   * @return {Promise<any>}
   */
  private getIndex(): Promise<any> {
    this.table.loading = true
    return this.index({}).then((res) => {
      this.table.loading = false

      if (res.data.total === 0) {
        this.table.emptyText = '暂无数据'
      }

      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 获取查询
   *
   * @param {Object} params
   * @return Promise<any>
   */
  private getQuery(params: any): Promise<any> {
    this.table.loading = true
    return this.query({params}).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 处理搜索
   *
   * @return {void}
   */
  private handleSearch(): void {
    this.operate.searchLoading = true
    const params = {
      ...this.search,
      per_page: this.pagination.perPage,
      page: 1
    }
    this.getQuery(params).then(() => {
      this.operate.searchLoading = false
    }).catch(() => {
      this.operate.searchLoading = false
    })
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    this.params = {}
    this.search = {}
    this.initPagination()
    this.operate.loading = true
    this.getIndex().then((res) => {
      this.operate.loading = false
    }).catch((err) => {
      this.operate.loading = false
    })
  }

  /**
   * 处理查询排序
   *
   * {column, prop, order}
   */
  private handleQuerySort({ column, prop, order }: { column: any, prop: string, order: string }): void {
    this.querySort = { prop, order }
    this.getQuery({ order_field: prop, order })
  }

  /**
   * 处理锁定
   *
   * @param {Object} item 行
   * @private
   */
  private handleLock(item: any): void {
    this.$confirm(item.row.is_lock === 0 ? '您确定锁定该账号吗？' : '您确定解锁该账号吗？', '操作提示', {
      type: 'warning'
    }).then(() => {
      this.table.loading = true
      this.lock({
        id: item.row.uid,
        index: item.$index,
        params: { is_lock: item.row.is_lock }
      }).then((res) => {
        res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
        this.table.loading = false
      }).catch((err) => {
        this.table.loading = false
      })
    })
  }

  /**
   * 处理查询
   *
   * @return {Promise<any>}
   */
  private handleQuery(): Promise<any> {
    this.table.loading = true
    const params = {
      ...this.search,
      ...this.params,
      per_page: this.pagination.perPage,
      page: 1
    }
    return this.getQuery(params).then((res) => {
      this.table.loading = false
      if (res.status === 200) {
        this.pagination.currentPage = res.data.current_page
      }
    }).catch(() => {
      this.table.loading = false
    })
  }

  /**
   * 处理分页
   *
   * @return {void}
   */
  private handlePageQuery(): void {
    this.table.loading = true
    const params = {
      ...this.params,
      per_page: this.pagination.perPage,
      page: this.pagination.currentPage
    }

    this.getQuery(params)
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/view/image';

// 绑定
.binding {
    .account-bind {
        margin-right: 3px;
        width: 24px;
        height: 24px;
        color: #999;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        background-color: #ddd;
        border-radius: 13px;
        cursor: pointer;

        &:hover {
            opacity: .8;
        }

        &:last-child {
            margin-right: 0;
        }

        &--yes {
            color: #fff;
            background: $--color-success;
        }

        &--qq {
            color: #fff;
            background: #4272f7;
        }

        &--wechat, &--mini--program {
            color: #fff;
            background: #00ad4a;
        }

        &--app {
            color: #fff;
            background: $--color-primary;
        }
    }
}
</style>
